<template>
    <div class="ruzhu1">
        <div class="ruzhubox">
          <div class="title2">
       <div class="div"> 【入驻机构申报详情】</div>
       <div v-if="type==0" style="color: #1CA9FF;">当前申报状态:待审核</div>
      <div v-if="type==1" style="color: blue;">当前申报状态:已通过</div>
      <div v-if="type==2" style="color: red;">当前申报状态:已驳回</div>
      <div v-if="type==3" style="color: green;">当前申报状态:审核中</div>
      <div v-if="type==4" style="color: #A5A9AF;">当前申报状态:草稿</div>
      </div>
            <div class="ruzhuForm">
            <el-form ref="form" label-position="top" :model="table" :disabled="type==1||type==0">
                <el-row>
                    <el-col :span="12" class="form-item">
                        <el-form-item label="注册时间（存续两年）" prop="registerLogin">
                            <el-date-picker v-model="table.registerLogin" type="date" placeholder="选择日期"
                                value-format="yyyy-MM-dd hh:mm:ss">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12" class="form-item">
                        <el-form-item label="固定场所" prop="fixedPlace">
                            <el-input v-model="table.fixedPlace" placeholder="请输入文本"></el-input>
                        </el-form-item>
                    </el-col>

                </el-row>
                <el-row>
                    <el-col :span="12" class="form-item">
                        <el-form-item label="人员配置情况" prop="staffingSituation">
                            <el-input v-model="table.staffingSituation" placeholder="请输入文本"></el-input>
                        </el-form-item>
                    </el-col>

                </el-row>
                <el-row>
                    <el-col :span="12" class="form-item">
                        <el-form-item label="专业团队" prop="professionalTeam">
                            <el-input type="textarea" :rows="3" placeholder="请输入文本" v-model="table.professionalTeam">
                            </el-input>
                        </el-form-item>
                    </el-col>

                </el-row>
                <el-row>
                    <el-col :span="12" class="form-item">
                        <el-form-item label="服务客户数量及符合重点支持方向" prop="serveClientsDirection">
                            <el-input type="textarea" :rows="3" placeholder="请输入文本" v-model="table.serveClientsDirection">
                            </el-input>
                        </el-form-item>
                    </el-col>

                </el-row>
            </el-form>
        </div>
        <div>
            <div class="title2">
                【申请资料】
            </div>
            <el-table :data="huixian" class="my-table" border style="width: 100%;">
                <el-table-column width="60px" align="center" label="序号"  type="index"
                    :label-class-name="'table-header'"></el-table-column>
                <el-table-column align="center" label="资料名称" prop="name" :label-class-name="'table-header'">
                    <template slot-scope="scope">
                        <span class="name">{{ scope.row.dataName |flitt() }}</span>
                    </template>
                </el-table-column>
              
                <el-table-column align="center" label="资料上传" :label-class-name="'table-header'">
                    <template slot-scope="{row}">
            <el-upload class="upload-demo" :action="https+'zxqyfw/pub/fileUploadRecord/upload'"
              :on-preview="handlePreview" :data="uploadfile(row.name, '资料上传')" :headers="{ Authorization: token }"
              
              :on-success="(response, file, fileList) => { return handleSuccess(response, file, fileList, row, row.name, '资料上传') }"
              :on-remove="(file, fileList) => handleRemove(file, fileList, row, 1)" :before-remove="beforeRemove" multiple :limit="3" :on-exceed="handleExceed"
              :accept="'.pdf'" :file-list="row.fileNameList">
              <el-icon class="iconDownload1" name="upload2"></el-icon>
              <span class="text1">上传文件</span>
            </el-upload>
          </template>
                </el-table-column>
                <el-table-column align="center" label="辅助证明文件上传" :label-class-name="'table-header'">
                    <template slot-scope="{row}">
            <el-upload class="upload-demo" :action="https+'zxqyfw/pub/fileUploadRecord/upload'"
              :on-preview="handlePreview" :data="uploadfile(row.name, '辅助证明文件上传')" :headers="{ Authorization: token }"
              
              :on-success="(response, file, fileList) => { return handleSuccess(response, file, fileList, row, row.name, '辅助证明文件上传') }"
              :on-remove="(file, fileList) => handleRemove(file, fileList, row, 2)" :before-remove="beforeRemove" multiple :limit="3" :on-exceed="handleExceed"
              :accept="'.pdf'" :file-list="row.axioyNameList">
              <el-icon class="iconDownload1" name="upload2"></el-icon>
              <span class="text1">上传文件</span>
            </el-upload>
          
          </template>
                </el-table-column>
                <el-table-column width="150" align="center" label="审核状态" prop="status" :label-class-name="'table-header'">
                    <template slot-scope="scope">
                        <span class="status">{{ scope.row.pprovalStatus === 0 ? '待审核' : scope.row.pprovalStatus === 1 ? '已通过' : scope.row.pprovalStatus === 2 ? '已驳回' : '' }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="title2">
                【相关联系科室】
            </div>
            <div class="lianxi">
                <div>兰州市中小企业公共服务平台</div>
                <div>信息科</div>
                <div>5111302</div>
            </div>
            <div class="tableFoot">
              <button v-if="type==2" @click="submit(4)">保存</button>
      <button v-if="type==4" @click="submit(4)">保存</button>
      <button v-if="type==2" @click="submit(0)">提交</button>
      <button v-if="type==4" @click="submit(0)">提交</button>
            </div>
        </div>
        </div>
    </div>
</template>

<script>
import {  download, moban_list, upload_file,jigou_reset,shifan_detail,getFileName,pingtai_Count  } from '../../api/api'
import { http } from '@/until/http';
export default {
    data() {
        return {
          https:http,
            uploadData: {
            },
             table:{},
            huixian:[],
            resData: {},
            fileList: [],
            response: '',
            token: '',
            upload: {
                "userId": this.$store.state.userId,
                "level": 3,
                "applicationType": 2,
                "fixedPlace": "",
                "professionalTeam": "",
                "registerLogin": "",
                "serveClientsDirection": "",
                "staffingSituation": "",
                "dataType": 0,
                "file1": { "申请入驻平台网站机构评审表_资料上传": [] },
                "file2": { "申请入驻平台网站机构评审表_辅助证明文件上传": [] },
                "file3": { "线上驻协议_资料上传": [] },
                "file4": { "线上驻协议_辅助证明文件上传": [] },
                "file5": { "入住企业地址联系方式_资料上传": [] },
                "file6": { "入住企业地址联系方式_辅助证明文件上传": [] },
            },
            formData: {
                registerLogin: "",
                fixedPlace: "",
                staffingSituation: "",
                professionalTeam: "",
                serveClientsDirection: "",
            },
            tableData: [
                { id: '1', name: "申请入驻平台网站机构评审表", status: "待审核", file: '上传文件', moban: '下载模板', zhengming: '上传辅助证明文件', fileId: '1656187754460225538' },
                { id: '2', name: "线上驻协议", status: "待审核", file: '上传文件', moban: '下载模板', zhengming: '上传辅助证明文件', fileId: '1656187754460225538' },
                { id: '3', name: "入住企业地址联系方式", status: "待审核", file: '上传文件', moban: '下载模板', zhengming: '上传辅助证明文件', fileId: '1656187754460225538' },
            ],

            data: {
                userId: '',
                applicationType: '0',
                level: '0',
                dataType: '0'
            },
            chexiao:[],
            isshenbao:'',
            level:null,
            type:null
        };
    },
    methods: {
      handleCommand(){
        this.huixian[0].applicationLevel=command
      },
    //取消申报
    quxiao() {
        this.chexiao= this.chexiao.join(',')
      repeal({id:this.chexiao}).then((res)=>{
        if(res.data.state=='20000'){
          this.$message({
          message: '撤销成功',
          type: 'success'
        });
        }else{
          this.$message.error(res.data.message);
        }
        
      })
    },
    uploadfile(rowname, type) {
      return { userId: this.$store.state.userId, name: rowname, type: type }
    },
    zancun() {
      console.log(this.fileList);
    },
    //提交表单
    submit(state) {
      const data = this.huixian.reduce((prev, next, index) => {
        const startIndex = index * 2;
        const dataName =(next.id+',')+ next.dataName.split(',').pop();
        prev[`file${startIndex + 1}`] = {
          [dataName + '_资料上传']: next?.fileNameList?.map(item => item.fileId) || [],
        }
        prev[`file${startIndex + 2}`] = {
          [dataName + '_辅助证明文件上传']: next?.axioyNameList?.map(item => item.fileId) || [],
        }
        return prev;
      }, {})
      data.userId = this.$store.state.userId;
      data.dataType = this.huixian[0].dataType;
      data.applicationId = this.huixian[0].applicationId
      data.applicationType =2
      data.level= 3
      data.pprovalStatus=state
      console.log(this.table);
      data. professionalTeam= this.table.professionalTeam,
      data. registerLogin=  this.table.registerLogin.replace('T', ' '),
      data. serveClientsDirection= this.table.serveClientsDirection,
      data. staffingSituation= this.table.staffingSituation,
      data.fixedPlace=this.table.fixedPlace
      jigou_reset(data).then((res) => {
        if (res.data.state == '20000') {
          this.$message({
            message: '提交成功',
            type: 'success',
          });
        } 
      })
    },
    download(row) {
      console.log(row);
      download({ fileId: '1657779828016836609' }).then((res) => {
        // console.log(JSON.parse(res.data.type));
        let url = window.URL.createObjectURL(new Blob([res.data], { type: 'application/vnd.ms-excel' }))
        let link = document.createElement("a")
        link.style.display = "none"
        link.href = url
        link.setAttribute("download", 'a.xls')
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        console.log(link);
      })
    },
   
    //点击删除按钮
    handleRemove(file, fileList, row, flag) {
      console.log(file, fileList, row)
      if (flag ===1) {
        row.fileNameList = row.fileNameList.filter(item => {
          return item.fileId !== file.fileId;
        })
      } else if (flag === 2) {
        row.axioyNameList = row.axioyNameList.filter(item => {
          return item.fileId !== file.fileId;
        })
      }
    },
    //预览文件
    handlePreview(file) {
      console.log(file);
      upload_file({ fileId: file.fileId }).then((res) => {
        console.log(res);
        let url = window.URL.createObjectURL(new Blob([res.data], { type: 'application/pdf' }))

        window.open(url)
      })

    },
    //超出限制
    handleExceed() {
      this.$message.warning('每一项只能上传3个文件');
    },
    //点击移除的对话框
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}?`);
    },
    //上传成功的回调
    handleSuccess(response, file, fileList, row, name, type) {
      if (response && response.state == '20000') {
        console.log(response, file, fileList, row, name, type);
        if (type == '资料上传') {
          name = name + '_资料上传'
          console.log(row);
          row.fileNameList.push({
            fileId: response.data,
            ...file,
          })
          // for (var key in this.upload) {
          //   console.log(key);
          //   if (key.slice(4, 6) == (id * 2) - 1) {
          //     console.log(this.upload[key][name]);
          //     this.upload[key][name].push(response.data)
          //     // console.log( this.upload[key][name].push(response.data));
          //     console.log(this.upload);
          //   }
          // }
        } else if (type == '辅助证明文件上传') {
          name = name + '_辅助证明文件上传'
          row.axioyNameList.push({
            fileId: response.data,
            ...file,
          })
          // for (var keys in this.upload) {
          //   if (keys.slice(4, 6) == (id * 2)) {
          //     //  console.log(this.upload[keys]);
          //     this.upload[keys][name].push(response.data)
          //     // console.log( this.upload[key][name].push(response.data));
          //     console.log(this.upload);
          //   }
          // }
        }
        console.log(this.huixian);
      }
    },
  }, 
  filters: {
    flitt(name) {
      console.log(name);
      var name1=name.split(',')
      var name2=name1.shift()
      console.log(name2);
      return name2.toString() 
    }
  },
  created() {
    this.token = localStorage.getItem('token')
    this.uploadData.userId = this.$store.state.userId
    console.log(this.huixian);
    moban_list({ applicationType: 0 }).then((res) => {
      console.log(res);
    })
    shifan_detail({ userId: this.$store.state.userId, type: '2' }).then((res) => {
      var dataLIst = res.data.data;
      console.log(dataLIst, res.data.data);
      dataLIst.forEach(item => {
        this.chexiao.push(item.id)
        item.dataName = item.dataName.split('_').shift()
        item.fileNameList = []
        item.axioyNameList = []
        if (item.uploadDataFileId.length > 0) {
          item.uploadDataFileId = item.uploadDataFileId.split(',')
          item.uploadDataFileId.forEach((items) => {
            getFileName({ fileId: items }).then((res1) => {
              let obj = {
                fileId: items,
                fileName: res1.data.data,
                name: res1.data.data,
              }
              // console.log(item.fileNameList);
              item.fileNameList.push(JSON.parse(JSON.stringify(obj)))

            })

          })
        } else {
          item.uploadDataFileId = []
        }
        if (item.uploadAuxiliaryFileId.length > 0) {
          item.uploadAuxiliaryFileId = item.uploadAuxiliaryFileId.split(',')
          item.uploadAuxiliaryFileId.forEach(items => {
            getFileName({ fileId: items }).then(res2 => {
              let obj = {
                fileId: items,
                fileName: res2.data.data,
                name: res2.data.data,
              }
              item.axioyNameList.push(JSON.parse(JSON.stringify(obj)))
            })
          })
        } else {
          item.uploadAuxiliaryFileId = []
        }
      })

      this.huixian = dataLIst
      this.level=this.huixian[0].applicationLevel
      this.type=this.$store.state.rzState
      console.log(this.type);
     this.table= dataLIst[0]
    })
    pingtai_Count({userId:this.$store.state.userId,type:'1'}).then((res)=>{
      this.isshenbao=res.data.data.pprovalStatus
    })
  },
    components: {
    }
}
</script>

<style scoped lang="scss">
.title2 {
     width: 100%;
     height: 40px;
     font-size: 18px;
     font-family: Microsoft YaHei;
     font-weight: bold;
     color: #1285D7;
     line-height: 40px;
     margin: 20px 0px;
     display: flex;
     
     div:nth-of-type(2){
        color: black;
        font-size: 16px;
        margin: 0px 20px;
     }
     div:nth-of-type(3){
        color: black;
        font-size: 15px;
     }
   }

.lianxi {
    display: flex;
    margin-bottom: 50px;

    div {
        width: 230px;
        height: 55px;
        background: #FAFAFA;
        border: 2px solid #EEEEEE;
        line-height: 55px;
        text-align: center;
    }

    div:nth-of-type(1) {
        width: 30%;
    }
}

.ruzhu {
    width: 100%;
    
    .ruzhuBox {
        width: 1220px;
        height: 100%;
        background: #FFFFFF;
        margin: 30px;

    }
}

.tableFoot {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 30px;

    button {
        margin: 0px 10px;

        &:hover {
            cursor: pointer;
        }
    }

    button:nth-of-type(1) {
        width: 98px;
        height: 40px;
        background: #F39200;
        border: 0;
        border-radius: 3px 3px 3px 3px;
        color: white;
    }

    button:nth-of-type(2) {
        width: 98px;
        height: 40px;
        background: #2797E8;
        border-radius: 3px 3px 3px 3px;
        border: 0;

        color: white;
    }

    button:nth-of-type(3) {
        width: 98px;
        height: 40px;
        background: #FFFFFF;
        border-radius: 3px 3px 3px 3px;
        color: white;
        border: 0;
    }
}

.ruzhuBox {
    width: 1220px;
    height: 100%;
    background: #FFFFFF;
    box-sizing: border-box;
    padding: 10px 50px;
    .title {
        display: flex;

        div:nth-of-type(1) {
            width: 120px;
            height: 50px;
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #262626;
            line-height: 50px;
            margin-bottom: 20px;
            border-bottom: 4px #1285D7 solid;

        }

        div:nth-of-type(2) {
            height: 50px;
            font-size: 15px;
            font-family: Arial;
            font-weight: 400;
            color: #DCDCDC;
            line-height: 50px;
            margin-right: 5px;

            border-bottom: 4px #1285D7 solid;

        }

        div:nth-of-type(3) {
            width: 189px;
            height: 50px;
            font-size: 15px;
            font-family: Arial;
            font-weight: 400;
            color: #DCDCDC;
            line-height: 50px;

            border-bottom: 4px #1285D7 solid;

        }

    }

    .title2 {
        width: 100%;
        height: 40px;
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #1285D7;
    }
}

.name {
    width: 208px;
    height: 45px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #FD8544;
}

.text {
    cursor: pointer;
    color: #1285D7;
}

.iconDownload {
    height: 14px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #1285D7;
}

.el-table__header {
    background-color: #1285D7 !important;
    color: white;
}

::v-deep .el-table__header th.is-leaf,
::v-deep .el-table__header th.gutter {
    background-color: #1285D7 !important;
    color: white;
    font-size: 16px;
}

.status {
    width: 48px;
    height: 16px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #D62502;
}

.el-button--primary {
    background-color: #fd8544;
    border-color: #fd8544;
}</style>